import Link from "next/link";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
  Bot,
  Building2,
  FileSpreadsheet,
  HeartPulse,
  MessageSquareText,
  PieChart,
  ShieldCheck,
  Building,
  Factory,
  BarChart,
  ArrowRight,
  Check,
  DollarSign,
} from "lucide-react";

const industries = [
  {
    id: "finance",
    name: "Finance",
    icon: DollarSign,
    color: "text-green-400",
    agents: ["AnalystAgent", "ComplianceAgent", "RiskAgent"],
    description:
      "Autonomous agents for financial analysis, regulatory compliance, and risk assessment.",
  },
  {
    id: "healthcare",
    name: "Healthcare",
    icon: HeartPulse,
    color: "text-red-400",
    agents: ["PatientCareAgent", "MedicalResearchAgent"],
    description:
      "AI solutions for patient data management, treatment optimization, and medical research.",
  },
  {
    id: "manufacturing",
    name: "Manufacturing",
    icon: Factory,
    color: "text-blue-400",
    agents: ["SupplyChainAgent", "QualityControlAgent"],
    description:
      "Agents that optimize production processes, supply chains, and quality control.",
  },
  {
    id: "enterprise",
    name: "Enterprise",
    icon: Building,
    color: "text-purple-400",
    agents: ["DataAnalyticsAgent", "WorkforceOptimizationAgent", "CustomerServiceAgent"],
    description:
      "Enterprise solutions for data analytics, workforce optimization, and customer service.",
  },
];

const solutions = [
  {
    id: "agent-studio",
    name: "Agent Studio",
    description: "Create, train, and deploy custom AI agents for your business needs.",
    features: [
      "No-code agent builder with advanced customization",
      "Pre-built agent templates for common business tasks",
      "Training workflows with human feedback",
      "Enterprise-grade deployment and monitoring"
    ],
    icon: Bot,
  },
  {
    id: "agent-mesh",
    name: "Agent Mesh",
    description: "Coordinate multiple AI agents in a unified system to tackle complex workflows.",
    features: [
      "Cross-agent communication protocols",
      "Workflow orchestration",
      "Performance analytics across agent networks",
      "Scalable agent coordination"
    ],
    icon: MessageSquareText,
  },
  {
    id: "analytics-agent",
    name: "Analytics Agent",
    description: "Transform raw data into actionable business insights with AI-powered analytics.",
    features: [
      "Automated data processing and cleaning",
      "Advanced pattern recognition",
      "Customizable reporting dashboards",
      "Anomaly detection and alerting"
    ],
    icon: PieChart,
  },
  {
    id: "enterprise-suite",
    name: "Enterprise Suite",
    description: "End-to-end AI solution for large organizations with complex requirements.",
    features: [
      "Custom agent development",
      "Enterprise system integration",
      "Dedicated support and training",
      "Regular updates and improvements"
    ],
    icon: Building2,
  },
  {
    id: "compliance-guardian",
    name: "Compliance Guardian",
    description: "AI agents that ensure regulatory compliance across your organization.",
    features: [
      "Regulatory monitoring and updates",
      "Automated compliance checking",
      "Audit trail and documentation",
      "Risk assessment and mitigation"
    ],
    icon: ShieldCheck,
  },
  {
    id: "data-orchestrator",
    name: "Data Orchestrator",
    description: "Manage and optimize your data workflows with intelligent AI agents.",
    features: [
      "Automated ETL processes",
      "Data quality monitoring",
      "Cross-source data integration",
      "Data governance enforcement"
    ],
    icon: FileSpreadsheet,
  },
];

export default function Solutions() {
  return (
    <div className="flex flex-col min-h-screen bg-slate-950">
      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-slate-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none text-white">
                AI Agent <span className="text-[#50E3C2]">Solutions</span>
              </h1>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                Discover our suite of specialized AI agents designed to transform your business operations and drive results.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Product Grid Section */}
      <section className="w-full py-12 md:py-24 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-10">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">Our Solutions</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                Explore our comprehensive range of AI agent products, each designed to solve specific business challenges.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {solutions.map((solution) => (
              <Card key={solution.id} className="bg-slate-900/50 border-slate-800 backdrop-blur-sm overflow-hidden hover:border-[#50E3C2]/50 transition-colors">
                <CardHeader className="pb-4">
                  <div className="mb-3 w-12 h-12 rounded-lg bg-indigo-900/50 flex items-center justify-center">
                    <solution.icon className="h-6 w-6 text-[#50E3C2]" />
                  </div>
                  <CardTitle className="text-white">{solution.name}</CardTitle>
                  <CardDescription className="text-zinc-400">
                    {solution.description}
                  </CardDescription>
                </CardHeader>
                <CardContent className="pb-4">
                  <ul className="space-y-2">
                    {solution.features.map((feature, index) => (
                      <li key={index} className="flex items-start">
                        <Check className="h-5 w-5 text-[#50E3C2] mr-2 mt-0.5 flex-shrink-0" />
                        <span className="text-zinc-300 text-sm">{feature}</span>
                      </li>
                    ))}
                  </ul>
                </CardContent>
                <CardFooter>
                  <Link 
                    href={`/solutions/${solution.id}`}
                    className="inline-flex items-center text-[#50E3C2] text-sm font-medium hover:text-[#3AC4A5] transition-colors"
                  >
                    Learn more
                    <ArrowRight className="ml-1 h-4 w-4" />
                  </Link>
                </CardFooter>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Industry Solutions Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-b from-slate-950 to-slate-900">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-10">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">Industry Solutions</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                Specialized AI agents tailored to the unique challenges of different industries.
              </p>
            </div>
          </div>

          <Tabs defaultValue={industries[0].id} className="w-full">
            <TabsList className="w-full flex overflow-x-auto space-x-2 bg-transparent h-auto p-0 mb-8 justify-center">
              {industries.map((industry) => (
                <TabsTrigger
                  key={industry.id}
                  value={industry.id}
                  className="px-4 py-2 rounded-lg data-[state=active]:bg-slate-800 data-[state=active]:text-white data-[state=active]:shadow data-[state=inactive]:bg-slate-900/50 data-[state=inactive]:text-zinc-400"
                >
                  <industry.icon className={`h-5 w-5 ${industry.color} mr-2`} />
                  {industry.name}
                </TabsTrigger>
              ))}
            </TabsList>
            {industries.map((industry) => (
              <TabsContent key={industry.id} value={industry.id} className="mt-0">
                <div className="bg-slate-900/50 border border-slate-800 rounded-lg p-6">
                  <div className="flex flex-col md:flex-row gap-8">
                    <div className="md:w-1/3 space-y-4">
                      <div className="w-16 h-16 rounded-xl bg-slate-800/80 flex items-center justify-center">
                        <industry.icon className={`h-8 w-8 ${industry.color}`} />
                      </div>
                      <h3 className="text-2xl font-bold text-white">{industry.name} Solutions</h3>
                      <p className="text-zinc-400">
                        {industry.description}
                      </p>
                      <Button variant="outline" className="border-[#50E3C2] text-[#50E3C2] hover:bg-[#50E3C2]/10">
                        <Link href={`/industries/${industry.id}`}>
                          Explore {industry.name} Solutions
                        </Link>
                      </Button>
                    </div>
                    <div className="md:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-6">
                      {industry.agents.map((agent, index) => (
                        <div key={index} className="bg-slate-800/50 border border-slate-700 rounded-lg p-5 hover:border-[#50E3C2]/30 transition-colors">
                          <div className="flex items-center space-x-3 mb-3">
                            <Bot className="h-6 w-6 text-[#50E3C2]" />
                            <h4 className="text-lg font-semibold text-white">{agent}</h4>
                          </div>
                          <p className="text-zinc-400 text-sm">
                            Specialized AI agent for {industry.name.toLowerCase()} applications, designed to enhance {agent.replace('Agent', '').toLowerCase()} operations.
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </section>

      {/* Case Studies Section */}
      <section className="w-full py-12 md:py-24 bg-slate-900">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-10">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">Success Stories</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                See how our clients have transformed their operations with bgactor's AI agents.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <Card className="bg-slate-900/50 border-slate-800 overflow-hidden">
              <div className="h-2 bg-green-500"></div>
              <CardHeader>
                <CardTitle className="text-white">35% Efficiency Gain</CardTitle>
                <CardDescription className="text-zinc-400">Global Financial Services Firm</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-zinc-300">
                  "bgactor's Analytics Agent transformed our data operations, reducing report
                  generation time from days to minutes and identifying cost-saving opportunities we had missed."
                </p>
                <div className="mt-4 flex items-center">
                  <BarChart className="h-5 w-5 text-green-400 mr-2" />
                  <span className="text-sm text-zinc-400">Financial Data Processing</span>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-slate-900/50 border-slate-800 overflow-hidden">
              <div className="h-2 bg-blue-500"></div>
              <CardHeader>
                <CardTitle className="text-white">42% Reduced Downtime</CardTitle>
                <CardDescription className="text-zinc-400">Manufacturing Industry Leader</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-zinc-300">
                  "The SupplyChainAgent has revolutionized our operations. Predictive maintenance
                  alerts have dramatically reduced unplanned downtime across our facilities."
                </p>
                <div className="mt-4 flex items-center">
                  <Factory className="h-5 w-5 text-blue-400 mr-2" />
                  <span className="text-sm text-zinc-400">Production Optimization</span>
                </div>
              </CardContent>
            </Card>

            <Card className="bg-slate-900/50 border-slate-800 overflow-hidden">
              <div className="h-2 bg-purple-500"></div>
              <CardHeader>
                <CardTitle className="text-white">28% Customer Satisfaction Increase</CardTitle>
                <CardDescription className="text-zinc-400">E-commerce Platform</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-zinc-300">
                  "Our customer service transformed after implementing the CustomerServiceAgent.
                  Response times decreased while resolution rates improved significantly."
                </p>
                <div className="mt-4 flex items-center">
                  <MessageSquareText className="h-5 w-5 text-purple-400 mr-2" />
                  <span className="text-sm text-zinc-400">Customer Experience</span>
                </div>
              </CardContent>
            </Card>
          </div>

          <div className="flex justify-center mt-10">
            <Button asChild className="bg-indigo-900 hover:bg-indigo-800 text-white">
              <Link href="/case-studies">
                Explore All Case Studies
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-indigo-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">Ready to Transform Your Business?</h2>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                Schedule a demo to see our AI agents in action and discover how they can address your specific challenges.
              </p>
            </div>
            <div className="flex flex-col sm:flex-row gap-4 mt-6">
              <Button asChild size="lg" className="bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                <Link href="/demo">
                  Request a Demo
                </Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white/10">
                <Link href="/contact">
                  Contact Sales
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
} 